<template>
	<div class="m-view-systemOperationReport m-window">
		<div v-loading="supplierLoading" style="height:350px;width:25%;float:left">
			<el-card class="box-card" style="height:150px">
				<i :class="'iconfont icon-supplierManager'" style="float:left;color:#409eff"></i>
				<el-col :span="12" style="margin-left:10px">
					<el-row>
						<span class="normalText">供应商</span>
					</el-row>
					<el-row style="margin-top:0px">
						<span class="mainNum">{{supplierNum}}</span>
					</el-row>
					<el-row style="margin-top:0px;padding-bottom:10px">
						<span class="normalText">对账：{{supAccountCheckNum}} 订单：{{supOrderNum}}</span>
					</el-row>
				</el-col>
			</el-card>
			<el-card class="box-card" style="height:150px;margin-top:20px">
				<!-- <el-col style="width:100px">
                    <img class="sor_cpompany" src="@/assets/sor_company.jpg" style="width:75px;float:left">
				</el-col>-->
				<i :class="'iconfont icon-companyInfo'" style="float:left;color:orange"></i>
				<el-col :span="12" style="margin-left:10px">
					<el-row>
						<span class="normalText">公司</span>
					</el-row>
					<el-row style="margin-top:0px">
						<span class="mainNum">{{companyNum}}</span>
					</el-row>
					<el-row style="margin-top:0px;padding-bottom:10px">
						<span class="normalText">对账：{{comAccountCheckNum}} 订单：{{comOrderNum}}</span>
					</el-row>
				</el-col>
			</el-card>
		</div>
		<div class="m-content">
			<div>
				<el-row :gutter="10">
					<el-col :span="17">
						<span class="m-title">登录统计</span>
						<ve-line
							v-loading="userLoading"
							width="100%"
							style="float:right;height:180px;width:100%"
							:data="lineData"
							:settings="chartSettingsLine"
							:extend="extendLine"
							:legend="legendLine"
							:events="chartEventsLine"
						></ve-line>
					</el-col>
				</el-row>
			</div>
		</div>
		<div style="height:400px;width:95%;margin-top:10px">
			<div class="m-condition">
				<el-row :gutter="10" style="margin-left:10px">
					<span class="m-title">系统业务量统计</span>
				</el-row>
				<el-row :gutter="10" style="margin-left:10px">
					<el-col :span="3" style="float:right">
						<el-select
							value-key="id"
							v-model="choosedDays"
							placeholder="按天查询"
							clearable
							v-if="isDay"
							@change="dayChange"
						>
							<el-option
								v-for="item in dayOptions"
								:key="item.id"
								:label="item.dayText"
								:value="item.dayText"
							></el-option>
						</el-select>
					</el-col>
					<el-col :span="3" style="float:right">
						<el-select
							value-key="id"
							v-model="choosedMonths"
							placeholder="按月份查询"
							clearable
							v-if="isMonth"
							@change="monthChange"
						>
							<el-option
								v-for="item in monthOptions"
								:key="item.id"
								:label="item.monthText"
								:value="item.monthText"
							></el-option>
						</el-select>
					</el-col>
					<el-col :span="2" style="float:right">
						<el-radio v-model="typeChoosed" label="2" @change="typeChange">按日</el-radio>
					</el-col>
					<el-col :span="2" style="float:right">
						<el-radio v-model="typeChoosed" label="1" @change="typeChange">按月</el-radio>
					</el-col>
					<el-radio-group v-model="chartType" style="margin-bottom: 30px;">
						<el-radio-button label="对账模块">对账模块</el-radio-button>
						<el-radio-button label="订单模块">订单模块</el-radio-button>
					</el-radio-group>
					<ve-histogram
						v-if="chartType == '对账模块'"
						v-loading="actInvoiceLoading"
						:data="histogramData"
						:settings="actChartSettingsHistogram"
						:extend="extendHistogram"
						:mark-line="histogramChartMarkLine"
						:mark-point="histogramChartMarkPoint"
						:grid="grid"
					></ve-histogram>
					<ve-histogram
						v-if="chartType == '订单模块'"
						v-loading="ordInvoiceLoading"
						:data="histogramData"
						:settings="ordChartSettingsHistogram"
						:extend="extendHistogram"
						:mark-line="histogramChartMarkLine"
						:mark-point="histogramChartMarkPoint"
						:grid="grid"
					></ve-histogram>
				</el-row>
			</div>
		</div>

		<el-card
			class="act_box-card"
			style="margin-top:70px;width:49%;height:585px;float:left"
			v-loading="actCardLoading"
		>
			<div slot="header">
				<span class="m-title">{{actMonth}}月对账排行</span>
				<el-button
					type="text"
					style="border: none;color:blue;float: right;"
					class="moreBtn"
					@click="actShowMore"
				>更多></el-button>
			</div>
			<el-table :data="actData" style="height:550px;overflow:auto;width:49%;position:absolute">
				<el-table-column prop="rank" label="排行" width="90"></el-table-column>
				<el-table-column prop="supplierName" label="供应商" show-overflow-tooltip>
					<template slot-scope="scope">
						<div style="text-decoration:underline;cursor:pointer;">{{scope.row.supplierName}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="amount" label="金额(元)" width="150"></el-table-column>
				<el-table-column prop="monthRingRatio" label="月环比" width="90">
					<template slot-scope="actScope">
						<span
							v-if="actScope.row.monthRingRatio > 0"
							style="color:red"
						>{{actScope.row.monthRingRatio}}%▲</span>
						<span
							v-else-if="actScope.row.monthRingRatio < 0"
							style="color:green"
						>{{actScope.row.monthRingRatio * -1}}%▼</span>
						<span v-else>{{actScope.row.monthRingRatio}}%--</span>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card
			class="ord_box-card"
			style="margin-top:70px;width:49%;height:585px;float:right"
			v-loading="supCardLoading"
		>
			<div slot="header">
				<span class="m-title">供应商使用情况</span>
				<el-button
					type="text"
					style="border: none;color:blue;float: right;"
					class="moreBtn"
					@click="supShowMore"
				>更多></el-button>
			</div>
			<el-table style="height:550px;overflow:auto;width:49%;position:absolute" :data="ordData">
				<el-table-column prop="supplierName" label="供应商" show-overflow-tooltip>
					<template slot-scope="scope">
						<div style="text-decoration:underline;cursor:pointer;">{{scope.row.supplierName}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="reconciliation" label="对账模块" width="120">
					<template slot-scope="supActScope">
						<span v-if="supActScope.row.reconciliation == '0'" style="color:red">未使用</span>
						<span v-else-if="supActScope.row.reconciliation == '1'" style="color:green">使用</span>
					</template>
				</el-table-column>
				<el-table-column prop="order" label="订单模块" width="120">
					<template slot-scope="supOrdScope">
						<span v-if="supOrdScope.row.order == '0'" style="color:red">未使用</span>
						<span v-else-if="supOrdScope.row.order == '1'" style="color:green">使用</span>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 用户信息 -->
		<el-dialog
			title="用户信息"
			:visible.sync="userModel"
			v-dialogDrag
			:close-on-click-modal="false"
			width="40%"
		>
			<el-row :gutter="10" class="m-condition">
				<el-col :span="20">
					<el-input
						v-model="userNameModel"
						placeholder="请输入关键字进行过滤姓名"
						@input="userNameModelChange"
						clearable
					></el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="selectedUserNameModel">确定</el-button>
				</el-col>
			</el-row>
			<div class="m-agTableModel m-pBottom">
				<ag-grid-vue
					class="m-agTableContent ag-theme-balham"
					:gridOptions="userOptions"
					:columnDefs="userDefs"
					:rowData="userData"
				></ag-grid-vue>
			</div>
		</el-dialog>

		<!-- 月对账排行情况信息 -->
		<el-dialog
			title="月对账排行情况信息"
			:visible.sync="actShowMoreDialog"
			v-dialogDrag
			:close-on-click-modal="false"
			width="650px"
		>
			<el-row :gutter="10" class="m-condition">
				<el-col :span="20">
					<el-input
						v-model="actSupplierName"
						placeholder="请输入关键字进行过滤姓名"
						@input="actSupplierNameChange"
						clearable
					></el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="selectedActSupplierName">确定</el-button>
				</el-col>
			</el-row>
			<div class="m-agTableModel m-pBottom">
				<ag-grid-vue
					class="m-agTableContent ag-theme-balham"
					:gridOptions="actSupOptions"
					:columnDefs="actSupDefs"
					:rowData="actSupData"
					v-loading="actLoading"
				></ag-grid-vue>
			</div>
		</el-dialog>

		<!-- 供应商使用情况信息 -->
		<el-dialog
			title="供应商使用情况信息"
			:visible.sync="supShowMoreDialog"
			v-dialogDrag
			:close-on-click-modal="false"
			width="650px"
		>
			<el-row :gutter="10" class="m-condition">
				<el-col :span="20">
					<el-input
						v-model="supSupplierName"
						placeholder="请输入关键字进行过滤姓名"
						@input="supSupplierNameChange"
						clearable
					></el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="selectedSupSupplierName">确定</el-button>
				</el-col>
			</el-row>
			<div class="m-agTableModel m-pBottom">
				<ag-grid-vue
					class="m-agTableContent ag-theme-balham"
					:gridOptions="supSupOptions"
					:columnDefs="supSupDefs"
					:rowData="supSupData"
					v-loading="ordLoading"
				></ag-grid-vue>
			</div>
		</el-dialog>
	</div>
</template>

<style lang="less">
.m-view-systemOperationReport {
	overflow: auto;
	.iconfont {
		font-size: 80px;
	}

	.normalText {
		color: #909399;
		font-size: 12px;
	}

	.mainNum {
		color: #606266;
		font-size: 30px;
	}
}
</style>

<script>
import gridOptions from "lesso-common/public/gridOptions";
import { dateFormat } from "lesso-common/public/utils";
import agGridComponents from "@/components/agGridComponents.js"
// import constant from "@/public/constant";
import _APIS from "@/api";
import Vue from "vue";
/**
 * @group purchaseReport
 * 系统运行监控
*/
export default {
	name: "systemOperationReport",
	components: {
		agGridComponents
	},
	props: {
		rmTab: {
			type: Function
		},
	},
	data () {
		var self = this
		this.chartEventsLine = {
			click: function (e) {
				if (e.seriesName == "用户数") {
					console.log(e, self.lineData.rows[e.dataIndex])
					self.userModel = true
					self.userData = self.lineData.rows[e.dataIndex].userList
				}
			}
		}
		this.grid = {
			show: false,
			right: 30,
			containLabel: true
		}
		return {
			// 页面 ag-grid 
			gridOptions: {},
			columnDefs: [],
			loading: false, //表格加载动画
			actInvoiceLoading: false,
			ordInvoiceLoading: false,
			userLoading: false,
			supplierLoading: false,

			//页面搜索条件
			userSdate: '',
			userEdate: '',

			//推广供应商
			supplierNum: '',
			supAccountCheckNum: '',
			supOrderNum: '',
			//推广公司
			companyNum: '',
			comAccountCheckNum: '',
			comOrderNum: '',

			//用户信息框信息
			userModel: false,
			userOptions: {},
			userDefs: {},
			userData: [],
			userNameModel: '',

			//对账情况弹窗
			actShowMoreDialog: false,
			actLoading: false,
			actSupplierName: '',
			actSupOptions: {},
			actSupDefs: {},
			actSupData: [],
			//供应商使用情况弹窗
			supShowMoreDialog: false,
			ordLoading: false,
			supSupplierName: '',
			supSupOptions: {},
			supSupDefs: {},
			supSupData: [],

			//对账排行信息
			actData: [],
			ordData: [],
			actCardLoading: false,
			supCardLoading: false,

			//本周第一天时间和最后一天
			actMonth: '',
			// currentWeekFirstDay:'',
			// currentWeekLastDay:'',
			firstDayOfThreeMonth: '',
			firstDayOfSearch: '',
			lastDayOfThreeMonth: '',
			lastDayOfSearch: '',
			isMonth: false,
			isDay: true,
			typeChoosed: '2',
			chartType: '订单模块',
			choosedDays: '最近30天',
			choosedMonths: '',
			monthOptions: [{
				id: 1,
				monthText: '最近3个月',
				month: 3
			}, {
				id: 2,
				monthText: '最近6个月',
				month: 6
			}, {
				id: 3,
				monthText: '最近12个月',
				month: 12
			}, {
				id: 4,
				monthText: '最近24个月',
				month: 24
			}],

			dayOptions: [{
				id: 1,
				dayText: '最近7天',
				day: 7
			}, {
				id: 2,
				dayText: '最近14天',
				day: 14
			}, {
				id: 3,
				dayText: '最近30天',
				day: 30
			}, {
				id: 4,
				dayText: '最近60天',
				day: 60
			}],

			userEdate: dateFormat('yyyy-MM-dd', new Date()),
			userSdate: dateFormat('yyyy-MM-dd', new Date().getTime() - 604800000),

			//v-chart曲线图配置
			chartSettingsLine: {
				metrics: ['totalPerDay', 'totalNum'],
				labelMap: {
					'totalPerDay': '用户数',
					'totalNum': '次数'
				},
			},
			extendLine: {
				series: {
					label: {
						normal: {
							show: true
						}
					},
					lineStyle: {
						width: 4
					}
				},

			},
			legendLine: {
				right: '20px'
			},

			step: '5',
			tempStep: '',
			stamp: 0,
			lineData: {
				columns: ['time', 'totalPerDay', 'totalNum'],
				rows: [
					// {'time':'2019-1-16', 'userNum': 1},
				]
			},

			//v-chart条形图配置
			actChartSettingsHistogram: {
				metrics: ['gooAccNo', 'accountNo'],
				stack: {					'实物对账单': ['gooAccNo'],
					'会计对账单': ['accountNo']				},
				labelMap: {
					'gooAccNo': '实物对账单',
					'accountNo': '会计对账单',
				}
			},

			ordChartSettingsHistogram: {
				metrics: ['purOrdNo', 'deliveryNo'],
				stack: {					'采购订单': ['purOrdNo'],
					'送货单': ['deliveryNo']				},
				labelMap: {
					'purOrdNo': '采购订单',
					'deliveryNo': '送货单'
				}
			},

			histogramChartMarkLine: {
				label: {
					show: true,
					position: 'end',
					color: 'red',
				},
				data: [
					{ type: 'average', name: '平均值' }
				]
			},

			histogramChartMarkPoint: {
				data: [
					{ type: 'max', name: '最大值' },
					{ type: 'min', name: '最小值' }
				]
			},

			extendHistogram: {
				series: {
					label: {
						normal: {
							show: false
						}
					},
					animationDelay: function (idx) {
						return idx * 10;
					}
				},

				animationEasing: 'elasticOut',
				animationDelayUpdate: function (idx) {
					return idx * 5;
				}
			},

			histogramData: {
				columns: ['time', 'gooAccNo', 'accountNo', 'purOrdNo', 'deliveryNo'],
				rows: [
					// {'time':'2019-1-16', 'userNum': 1},
				]
			},
		}
	},
	created () {
		//获取最近三个月时间
		// this.getMonthsData(3);
		this.getDateData(30);
		//获取用户登录情况信息
		this.getUserData();
		//获取供应商和公司上线情况
		this.getStatistData();
		this.getInvoiceData(this.firstDayOfSearch, this.lastDayOfSearch);
		//获取对账排行信息
		this.getReconciliationRank();
		//获取供应商使用情况信息
		this.getUseSituation();
	},

	beforeMount () {
		// 页面 ag-grid 配置
		this.gridOptions = Object.assign({}, gridOptions(), {
			enableFilter: false, //列过滤器
			enableSorting: false, //列排序
		});

		//配置userDefs 用户信息
		this.userOptions = gridOptions({ singleSelection: true });
		this.userDefs = [
			{ headerName: "公司", field: "werks", width: 200 },
			{ headerName: "部门", field: "depart", width: 120, },
			{
				headerName: "账号",
				field: "account",
				width: 120,
			},
			{
				headerName: "姓名",
				field: "name",
				width: 200,
			}
		];

		//对账排行情况ag-grid设置
		this.actSupOptions = gridOptions({ singleSelection: true });
		this.actSupDefs = [
			{ headerName: "排名", field: "rank", width: 70 },
			{ headerName: "供应商", field: "supplierName", width: 200, tooltipField: 'supplierName' },
			{
				headerName: "金额(元)",
				field: "amount",
				width: 120,
			},
			{
				headerName: "月环比",
				field: "monthRingRatio",
				width: 90,
				cellRenderer: function (params) {
					if (params.value < 0) {
						return params.value * -1 + '%';
					} else {
						return params.value + '%'
					}
				}
			},
			{
				headerName: "对比",
				field: "flag",
				width: 90,
				cellRenderer: function (params) {
					if (params.value == '1') {
						return '<span style="color:green">▼</span>';
					} else if (params.value == '2') {
						return '<span style="color:red">▲</span>';
					} else {
						return '<span>--</span>';
					}
				}
			}
		];

		//供应商使用情况ag-grid设置
		this.supSupOptions = gridOptions({ singleSelection: true });
		this.supSupDefs = [
			{ headerName: "供应商", field: "supplierName", width: 250, tooltipField: 'supplierName' },
			{
				headerName: "对账模块",
				field: "reconciliation",
				width: 120,
				cellRenderer: function (params) {
					if (params.value == 0) {
						return '<span style="color:red">未使用</span>';
					} else if (params.value == 1) {
						return '<span style="color:green">使用</span>';
					}
				}
			},
			{
				headerName: "订单模块",
				field: "order",
				width: 120,
				cellRenderer: function (params) {
					if (params.value == 0) {
						return '<span style="color:red">未使用</span>';
					} else if (params.value == 1) {
						return '<span style="color:green">使用</span>';
					}
				}
			}
		];
	},
	mounted () { },
	methods: {
        /**
		 * @vuese
		 * 调接口查询登录数据
		*/
		getUserData () {
			var that = this;
			this.userLoading = true;
			let params = {}
			//调用接口
			_APIS.queryUserLoginReport(params).then(res => {
				var data = res.data
				if (data.code == 1) {
					that.userLoading = false;
					that.lineData.rows = []
					if (JSON.stringify(data.rows) != "{}") {
						for (let item in data.rows) {
							that.lineData.rows.push({
								time: formatUserDate(item),
								row: item,
								totalPerDay: data.rows[item].totalPerDay,
								totalNum: data.rows[item].loginCount,
								userList: data.rows[item].data.map(itemmx => {
									return {
										name: itemmx.employName,
										werks: itemmx.companyName,
										depart: itemmx.deptName,
										account: itemmx.userAccount
									}
								})
							})
						}
					} else {
						this.$message.error("未查询到数据");
					}

					this.lineData.rows = sort(this.lineData.rows)
					mergeSame(this.lineData.rows)
				} else {
					that.userLoading = false;
					that.$alert("操作失败：" + data.info, {
						showClose: false,
						confirmButtonText: "确定",
						customClass: "alertFailure"
					});
				}
			}, err => {
				that.userLoading = false;
				errorToast(this, err, 'message')
			});

			//格式化底标
			function formatUserDate (row) {
				var l, f;
				var l = row.split('-')[1],
					r = row.split('-')[2];

				// if (row.split('auth-')[1].indexOf('.') > -1) {
				//   l = row.split('auth-')[1].split('.')[1]
				//   r = row.split('auth-')[1].split('.')[2]
				// } else if (row.split('auth-')[1].indexOf('-') > -1) {
				//   l = row.split('auth-')[1].split('-')[1]
				//   r = row.split('auth-')[1].split('-')[2]
				// }

				if (l < 9) l = Number(l)
				return l + '.' + r
			}

			function sort (arr) {
				var newArr = []
				arr.forEach(element => {
					var time = new Date(element.row)
					if (newArr.length == 0) {
						newArr.push(element)
					} else {
						var index = ''
						for (var i = 0; i < newArr.length; i++) {
							var newtime = new Date(newArr[i].row)
							if (time > newtime) {
								index = i + 1;
							} else if (time < newtime) {
								index = i;
								break;
							}
						}
						newArr.splice(index, 0, element)
					}
				});
				return newArr
			}

			function mergeSame (arr) {
				for (var j = 0; j < arr.length; j++) {
					for (var k = j + 1; k < arr.length; k++) {
						if (arr[j].time == arr[k].time) {
							console.log(arr[j].time, arr[k].time)
							arr[j].totalPerDay = arr[j].totalPerDay + arr[k].totalPerDay
							arr[j].userList = arr[j].userList.concat(arr[k].userList)
							arr.splice(k, 1)
							break;
						}
					}
				}
			}
		},
        /**
		 * @vuese
		 * 调接口查询系统业务量统计数据
         * @arg 参数invoiceStDate为查询起始日期;invoiceEdDate为查询结束日期
		*/
		getInvoiceData (invoiceStDate, invoiceEdDate) {
			var that = this;
			let flagMounth = '';
			let flagYear = '';
			let countAccountNo = 0;
			let countDeliveryNo = 0;
			let countGooAccNo = 0;
			let countPurOrdNo = 0;
			let params = {
				"createSt": '',
				"createEt": ''
			}
			// 开始日期 结束日期
			if (invoiceStDate) {
				params.createSt = this.$utils.dateFormat("yyyy-MM-dd", invoiceStDate.replace(/\-/g, "/"))
			}
			else {
				this.$alert("请选择开始日期", "消息提示", {
					confirmButtonText: "确定"
				});
				return;
			}
			if (invoiceEdDate) {
				params.createEt = this.$utils.dateFormat("yyyy-MM-dd", invoiceEdDate.replace(/\-/g, "/"))
			}
			else {
				this.$alert("请选择结束日期", "消息提示", {
					confirmButtonText: "确定"
				});
				return;
			}

			this.actInvoiceLoading = true;
			// this.invoiceDisable = true;

			_APIS.queryInvoiceStat(params)
				.then(res => {
					var data = res.data
					that.histogramData.rows = []
					if (data.code == 1) {
						that.actInvoiceLoading = false;
						// that.invoiceDisable = false;
						if (that.typeChoosed == '1') {
							data.rows.forEach(item => {
                                let time1 = MonthFormatDate(item.time);
                                if (flagMounth == time1.split('.')[1] && flagYear == time1.split('.')[0]) return
								flagMounth = time1.split('.')[1];
                                flagYear = time1.split('.')[0];
                                countAccountNo = 0;
                                countDeliveryNo = 0;
                                countGooAccNo = 0;
                                countPurOrdNo = 0;
								data.rows.forEach(innerItem => {
									let time2 = MonthFormatDate(innerItem.time);
									if (time2 == flagYear + '.' + flagMounth) {
										countGooAccNo = countGooAccNo + innerItem.goodsAmount;
										countAccountNo = countAccountNo + innerItem.accountAmount;
										countPurOrdNo = countPurOrdNo + innerItem.orderAmount;
										countDeliveryNo = countDeliveryNo + innerItem.deliveryAmount;
									}
								})
								that.histogramData.rows.push({
									time: flagYear + '.' + flagMounth,
									gooAccNo: countGooAccNo,
									accountNo: countAccountNo,
									purOrdNo: countPurOrdNo,
									deliveryNo: countDeliveryNo
								})
							})
						} else if (that.typeChoosed == '2') {
							data.rows.forEach(item => {
								that.histogramData.rows.push({
									time: DayFormatDate(item.time),
									gooAccNo: item.goodsAmount,
									accountNo: item.accountAmount,
									purOrdNo: item.orderAmount,
									deliveryNo: item.deliveryAmount
								})
							})
						}
					} else {
						that.actInvoiceLoading = false;
						// that.invoiceDisable = false;
						that.$alert("操作失败：" + data.info, {
							showClose: false,
							confirmButtonText: "确定",
							customClass: "alertFailure"
						});
					}
				}, err => {
					that.actInvoiceLoading = false;
					// that.invoiceDisable = false;
					errorToast(this, err, 'message')
				});

			//格式化底标
			function DayFormatDate (paramTime) {
				var l = paramTime.split('-')[1];
				var r = paramTime.split('-')[2];

				if (l < 9) l = Number(l)
				return l + '.' + r
			}

			function MonthFormatDate (paramTime) {
				var l = paramTime.split('-')[0];
				var r = paramTime.split('-')[1];

				return l + '.' + r
			}
		},
        /**
		 * @vuese
		 * 用户信息关键字筛选
		*/
		userNameModelChange () {
			this.userOptions.api.setQuickFilter(this.userNameModel);
		},
        /**
		 * @vuese
		 * 对账供应商关键字筛选
		*/
		actSupplierNameChange () {
			this.actSupOptions.api.setQuickFilter(this.actSupplierName);
		},
        /**
		 * @vuese
		 * 供应商使用情况关键字筛选
		*/
		supSupplierNameChange () {
			this.supSupOptions.api.setQuickFilter(this.supSupplierName);
		},
        /**
		 * @vuese
		 * 用户信息关键字查询
		*/
		selectedUserNameModel () {
			this.userModel = false;
		},
        /**
		 * @vuese
		 * 对账情况信息关键字查询
		*/
		selectedActSupplierName () {
			this.actShowMoreDialog = false;
		},
        /**
		 * @vuese
		 * 供应商使用情况关键字查询
		*/
		selectedSupSupplierName () {
			this.supShowMoreDialog = false;
		},
        /**
		 * @vuese
		 * 系统业务量按月/按日查询方式变更回调
		*/
		typeChange () {
			this.choosedDays = '';
			this.choosedMonths = '';
			if (this.typeChoosed == '1') {
				this.isMonth = true;
				this.isDay = false;
				this.choosedMonths = this.monthOptions[1].monthText;
				this.getMonthsData(6);
				this.getInvoiceData(this.firstDayOfThreeMonth, this.lastDayOfThreeMonth);
			} else if (this.typeChoosed == '2') {
				this.isDay = true;
				this.isMonth = false;
				this.choosedDays = this.dayOptions[2].dayText;
				this.getDateData(30);
				this.getInvoiceData(this.firstDayOfSearch, this.lastDayOfSearch);
			}
		},
        /**
		 * @vuese
		 * 月对账排行显示更多
		*/
		actShowMore () {
			this.actShowMoreDialog = true;
			this.getReconciliationRank(7);
		},
        /**
		 * @vuese
		 * 供应商使用情况排行显示更多
		*/
		supShowMore () {
			this.supShowMoreDialog = true;
			this.getUseSituation(7);
		},
        /**
		 * @vuese
		 * 获取月对账排行数据
         * @arg 参数rankFlag为查询范围
		*/
		getReconciliationRank (rankFlag) {
			var that = this;
			if (rankFlag === 7) {
				this.actLoading = true;
			} else {
				this.actCardLoading = true;
			}
			let today = new Date();
			let todayDate = today.getDate();
			let todayMonth = today.getMonth() + 1;
			if (todayDate > 8) {
				that.actMonth = todayMonth;
				//大于当月8号，日期取当月第一天和最后一天
				let firstDayOfCurrentMonth = dateFormat('yyyy-MM-dd 00:00:00', this.getCurrentMonthFirstDay(today));
				let lastDayOfCurrentMonth = dateFormat('yyyy-MM-dd 23:59:59', this.getCurrentMonthLastDay(today));

				let obj = {
					startTime: firstDayOfCurrentMonth,
					endTime: lastDayOfCurrentMonth
				}
				_APIS.getReconciliationRank(obj).then(res => {
					var data = res.data
					that.actCardLoading = false;
					that.actLoading = false;
					if (data.code == 1) {
						let rankData = 0;
						if (rankFlag === 7) {
							that.actSupData = data.rows;
							that.actSupData.forEach(actItem => {
								rankData = rankData + 1;
								actItem.rank = rankData;
								actItem.monthRingRatio = parseInt(actItem.monthRingRatio.split('%')[0]);
								if (actItem.monthRingRatio > 0) {
									actItem.flag = '2'
								} else if (actItem.monthRingRatio < 0) {
									actItem.flag = '1'
								}
							})
						} else {
							for (let i = 0; i < 10; i++) {
								if (data.rows[i] != undefined) {
									that.actData.push(data.rows[i]);
								}
							}
							that.actData.forEach(item => {
								rankData = rankData + 1;
								item.rank = rankData;
								item.monthRingRatio = parseInt(item.monthRingRatio.split('%')[0]);
							})
						}
					}
				}, err => {
					that.actLoading = false;
					that.actCardLoading = false;
				});
			} else {
				that.actMonth = todayMonth - 1;
				//少于8号获取上月第一天和最后一天
				var lastToday = new Date(today);
				var lastMonth = today.getMonth() - 1;
				lastToday.setMonth(lastMonth);
				let firstDayOfLastMonth = this.getCurrentMonthFirstDay(lastToday);
				let lastDayOfLastMonth = this.getCurrentMonthLastDay(lastToday);

				let obj = {
					startTime: firstDayOfLastMonth,
					endTime: lastDayOfLastMonth
				}
				_APIS.getReconciliationRank(obj).then(res => {
					var data = res.data
					that.actCardLoading = false;
					that.actLoading = false;
					if (data.code == 1) {
						let rankData = 0;
						if (rankFlag === 7) {
							that.actSupData = data.rows;
							that.actSupData.forEach(actItem => {
								rankData = rankData + 1;
								actItem.rank = rankData;
								actItem.monthRingRatio = parseInt(actItem.monthRingRatio.split('%')[0]);
								if (actItem.monthRingRatio > 0) {
									actItem.flag = '2'
								} else if (actItem.monthRingRatio < 0) {
									actItem.flag = '1'
								}
							})
						} else {
							for (let i = 0; i < 10; i++) {
								if (data.rows[i] != undefined) {
									that.actData.push(data.rows[i]);
								}
							}
							that.actData.forEach(item => {
								rankData = rankData + 1;
								item.rank = rankData;
								item.monthRingRatio = parseInt(item.monthRingRatio.split('%')[0]);
							})
						}
					}
				}, err => {
					that.actLoading = false;
					that.actCardLoading = false;
				});
			}
		},
        /**
		 * @vuese
		 * 获取供应商使用情况排行数据
         * @arg 参数useFlag为查询范围标记
		*/
		getUseSituation (useFlag) {
			var that = this;
			if (useFlag === 7) {
				this.ordLoading = true;
			} else {
				this.supCardLoading = true;
			}
			_APIS.getUseSituationData().then(res => {
				var data = res.data
				that.supCardLoading = false;
				that.ordLoading = false;
				if (useFlag === 7) {
					that.supSupData = data.rows;
				} else {
					for (let i = 0; i < 10; i++) {
						if (data.rows[i] != undefined) {
							that.ordData.push(data.rows[i]);
						}
					}
				}
			}, err => {
				that.ordLoading = false;
				that.supCardLoading = false;
			});
		},
        /**
		 * @vuese
		 * 系统业务统计选择月份范围改变回调
         * @arg 参数value为当前值
		*/
		monthChange (value) {
			if (value == '最近3个月') {
				this.getMonthsData(3);
				this.getInvoiceData(this.firstDayOfThreeMonth, this.lastDayOfThreeMonth);
			} else if (value == '最近6个月') {
				this.getMonthsData(6);
				this.getInvoiceData(this.firstDayOfThreeMonth, this.lastDayOfThreeMonth);
			} else if (value == '最近12个月') {
				this.getMonthsData(12);
				this.getInvoiceData(this.firstDayOfThreeMonth, this.lastDayOfThreeMonth);
			} else if (value == '最近24个月') {
				this.getMonthsData(24);
				this.getInvoiceData(this.firstDayOfThreeMonth, this.lastDayOfThreeMonth);
			}
		},
        /**
		 * @vuese
		 * 系统业务统计选择天数范围改变回调
         * @arg 参数value为当前值
		*/
		dayChange (value) {
			if (value == '最近7天') {
				this.getDateData(7);
				this.getInvoiceData(this.firstDayOfSearch, this.lastDayOfSearch);
			} else if (value == '最近14天') {
				this.getDateData(14);
				this.getInvoiceData(this.firstDayOfSearch, this.lastDayOfSearch);
			} else if (value == '最近30天') {
				this.getDateData(30);
				this.getInvoiceData(this.firstDayOfSearch, this.lastDayOfSearch);
			} else if (value == '最近60天') {
				this.getDateData(60);
				this.getInvoiceData(this.firstDayOfSearch, this.lastDayOfSearch);
			}
		},

		/**
		 * @vuese
		 * 获取月份数据
         * @arg 参数month为需要获取的月数范围值
		*/
		getMonthsData (month) {
			let temp = month - 1;
			var monthOfYear = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
			let thisDate = new Date();
			let currentYear = thisDate.getFullYear();
			let finallyYear = '';
			let thisMonth = thisDate.getMonth();
			let lastThreeMonths = [];
			lastThreeMonths.push(monthOfYear[thisMonth]);
			for (var i = 1; i <= temp; i++) {
				thisDate.setMonth(thisDate.getMonth() - 1);
				finallyYear = thisDate.getFullYear();
				// thisDate.setMonth(thisMonth - i);
				// var m = thisDate.setMonth(thisMonth - i);
				// if()
				lastThreeMonths.unshift(monthOfYear[thisDate.getMonth()]);
			}
			var firstDay = new Date(finallyYear, lastThreeMonths[0] - 1, 1);
			var lastDay = new Date(currentYear, lastThreeMonths[temp], 0);
			firstDay = dateFormat('yyyy-MM-dd 00:00:00', firstDay);
			lastDay = dateFormat('yyyy-MM-dd 23:59:59', lastDay);
            console.log('月份',firstDay,lastDay)
			this.firstDayOfThreeMonth = firstDay;
			this.lastDayOfThreeMonth = lastDay;
		},

		/**
		 * @vuese
		 * 获取天数数据
         * @arg 参数day为天数范围值
		*/
		getDateData (day) {
			let time1 = new Date();
			time1.setTime(time1.getTime())
			let Y1 = time1.getFullYear()
			let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
			let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())
			let timer1 = Y1 + '/' + M1 + '/' + D1 // 当前时间
			let time2 = new Date()
			time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * day))
			let Y2 = time2.getFullYear()
			let M2 = ((time2.getMonth() + 1) > 10 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
			let D2 = (time2.getDate() > 10 ? time2.getDate() : '0' + time2.getDate())
			let timer2 = Y2 + '/' + M2 + '/' + D2 // 之前的7天或者30天

			this.firstDayOfSearch = dateFormat('yyyy-MM-dd 00:00:00', timer2);
			this.lastDayOfSearch = dateFormat('yyyy-MM-dd 23:59:59', timer1);
		},
        /**
		 * @vuese
		 * 获取当月第一天
         * @arg 参数currentDate为当前日期
		*/
		getCurrentMonthFirstDay (currentDate) {
			var date = new Date(currentDate);
			date.setDate(1);
			var month = parseInt(date.getMonth() + 1);
			var day = date.getDate();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			return date.getFullYear() + '/' + month + '/' + day;
		},
        /**
		 * @vuese
		 * 获取当月最后一天
         * @arg 参数currentDate为当前日期
		*/
		getCurrentMonthLastDay (currentDate) {
			var date = new Date(currentDate);
			var currentMonth = date.getMonth();
			var nextMonth = ++currentMonth;
			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
			var oneDay = 1000 * 60 * 60 * 24;
			var lastTime = new Date(nextMonthFirstDay - oneDay);
			var month = parseInt(lastTime.getMonth() + 1);
			var day = lastTime.getDate();
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			return date.getFullYear() + '/' + month + '/' + day;
		},
        /**
		 * @vuese
		 * 调接口获取供应商和公司上线情况数据
		*/
		getStatistData () {
			var that = this;
			_APIS.getStatistData()
				.then(res => {
					var data = res.data
					if (data.code == 1) {
						that.supplierNum = data.rows.supplierAmount;
						that.supAccountCheckNum = data.rows.supplierReconciliation;
						that.supOrderNum = data.rows.supplierOrder;
						that.companyNum = data.rows.companyAmount;
						that.comAccountCheckNum = data.rows.companyReconciliation;
						that.comOrderNum = data.rows.companyOrder;
					} else {
						that.$alert("操作失败：" + data.info, {
							showClose: false,
							confirmButtonText: "确定",
							customClass: "alertFailure"
						});
					}
				}, err => {
					errorToast(this, err, 'message')
				});
		}
	},
}
</script>
<style lang="less">
.m-view-systemOperationReport {
	.act_box-card {
		.el-card__body {
			padding: 0px;
		}
	}

	.ord_box-card {
		.el-card__body {
			padding: 0px;
		}
	}
}
</style>
